<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- 
**************

This file defines the static UI structure for Qype S60 WRT widget

Each view is defined as a separate div with 'view' class.

Rest of the views are defined in corresponding js files:
 
 - LocationView.js for GPS Location View
 - CategoriesView.js for Categories View
 - PlacesView.js for Places View
 - etc
 
 Only exception is Loading View, that does not have a separate js file.
 Loading view is controlled as a part of application initialization in app.js

*************** 
-->		
			
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="styles/main.css" />
		<script type="text/javascript" src="simdata/location.js"></script>
        <script type="text/javascript" src="scripts/namespace.js"></script>
        <script type="text/javascript" src="strings.js"></script>
		<script type="text/javascript" src="scripts/prototype.1.6.1.min.js"></script>
		<script type="text/javascript" src="scripts/platformservices.js"></script>
		<script type="text/javascript" src="config/config.js"></script>
        <script type="text/javascript" src="scripts/util.js"></script>
        <script type="text/javascript" src="scripts/wrtpressurize.js"> </script>
        <script type="text/javascript" src="scripts/Screen.js"></script>
        <script type="text/javascript" src="scripts/EventManager.js"></script>
        <script type="text/javascript" src="scripts/Engine.js"></script>
        <script type="text/javascript" src="scripts/Snippet.js"></script>
        <script type="text/javascript" src="scripts/View.js"></script>
		<script type="text/javascript" src="scripts/PlaceModel.js"> </script>
		<script type="text/javascript" src="scripts/LocationView.js"> </script>
   		<script type="text/javascript" src="scripts/PlaceView.js"> </script>
		<script type="text/javascript" src="scripts/MapTileView.js"> </script>
        <script type="text/javascript" src="scripts/CategoriesView.js"> </script>
		<script type="text/javascript" src="scripts/PlacesView.js"> </script>
		<script type="text/javascript" src="scripts/QypeApi.js"> </script>
        <script type="text/javascript" src="scripts/app.js"> </script>
        <title>Qype</title>
    </head>

	<!--
	In case you are interested on what's happening when the app is launched:
	qype -object and onload() -function is defined in app.js
	-->
    <body onload="qype.onload();" onresize="qype.onresize();">

		<!-- **************
		APPLICATION HEADER
		*************** --> 
    	
        <div class="header">
            <div class="button left" id="mainButtonLeft" onclick="EventManager.publish({ name: 'mainButtonClick', type: 'left' })">Home</div>
            <div class="button right" id="mainButtonRight" onclick="EventManager.publish({ name: 'mainButtonClick', type: 'right' })"></div>
        </div>
        <div id="container" class="content">
        	
			<!-- **************
			LOADING VIEW: Displayed when application is launched
			*************** -->
			
            <div id="loadingView" class="view splash">
                <div class="progress"></div>
                <div id="loadingStatus">Loading...</div>
            </div>
        	
			<!-- **************
			GPS LOCATE VIEW: Displayed when user selects to update GPS location
			*************** -->
			
            <div id="locationView" class="view location">
                <div class="progress"></div>
				<div id="holder" style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10;"></div>
                <div id="locationStatus">Receiving...</div>
            </div>
            
            <!-- **************
			CATEGORIES VIEW: Displayed when user clicks 'categories' button in main view
			*************** -->
			
			<div id="categoriesView" class="view categories">
                <div class="title">
                    <div class="text" id="categoriesHeader"></div>
                </div>
                <div class="items" id="categoriesContent">
                </div>
            </div>

            <!-- **************
			PLACES VIEW: Main view (list of nearby places)
			*************** -->
			
			<div id="placesView" class="view places">
                <div class="link">
                    <div class="text" id="categoriesLink"></div>
                </div>
              <div class="title">
                    <div class="text" id="placesHeader"></div>
                    <div class="button map" style="display: none" onclick="EventManager.publish({name:'mapLinkClicked'})">Map</div>
                </div>
                <div class="items" id="placesContent">
                </div>
            	<div class="footer">
            		<div class="action button" onclick="EventManager.publish({name:'locationButtonClicked'})"><div class="text">Refresh GPS</div></div>
            	</div>                
            </div>

            <!-- **************
			PLACE VIEW: Displayed when user selects single place from main view
			*************** -->
			
			<div id="placeView" class="view place">
				<div id="placeContent"></div>
			</div>

            <!-- **************
			MAP VIEW: Displayed when user pushes 'map' button in any view
			*************** -->
			
			<div id="mapView" class="view">
            	<div id="mobileMap"></div>
			</div>

        </div>
    </body>
</html>
